<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="left">
				<view class="a1">
					<text class="a2">首页</text>
				</view>
			</block>
		</hx-navbar>

    <view class="b1">
      <view class="b2" style="background-color: #fff;padding: 20rpx; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */">
        <image src="../../static/xiaohui.png" class="b3"></image>
        <view style="font-weight: 800">桂林电子科技大学</view>
      </view>
    </view>

    <view class="b1">
      <view class="b2">
        <image src="../../static/ic_logo.jpg" class="b3"></image>
        <view class="name-and-id">
          <view style="font-size: 16px;">毛健儒</view>
          <view style="font-size: 16px;color: #606266;">工号：2100301124</view>
        </view>
      </view>
    </view>

    <view class="parent-container">
      <view class="container">
        <view class="left">
          <view class="content" @click="gotoStuScore()">学生成绩管理<button class="left-enter-button">></button></view>
        </view>
        <view class="right">
          <view class="info-container">
            <view class="content" @click="goToMyTeach()">我教的班<button class="right1-enter-button">></button></view>
          </view>
          <view class="card-container">
            <view class="content" @click="gotoMyCard()">校园卡<button class="right2-enter-button" @click="navCard">></button></view>
          </view>
        </view>
      </view>
    </view>

    <view class="news">校内新闻</view>
    <scroll-view :scroll-y="true" class="c6">
      <view class="c7" v-for="(item, index) in noticeArr" :key="index">
        <view @click="intoNewDetail(item.id)" class="c8">
          <view class="c9">{{ item.title }}</view>
          <view class="d1">
            <view style="display: inline-block;width: 76%;"> {{ item.category }} </view>
            <text>{{item.publishDate.slice(0,10)}}</text>
          </view>
        </view>
        <image src="@/static/newList_icon.png" class="d2"></image>
      </view>
    </scroll-view>
    <view class="resources">教学资源</view>
    <scroll-view :scroll-y="true" class="c6">
      <view class="c7" v-for="(item,index) in resourceList" :key="index">
        <view @click="intoResourceDetail(item.id)" class="c8">
          <view class="c9">{{item.title}}</view>
          <view class="d1">{{item.teacherName}}</view>
        </view>
        <image :src="item.icon" class="d2"></image>
      </view>
    </scroll-view>
	</view>
</template>

<script>
	import teacher from "../../api/teacher";
  import student from "../../api/student";

  export default {
		data() {
			return {
				config: {
					back: false,
					fixed: true,
					leftSlot: true,
					search: {
						placeholder: ''
					}
				},
				tab: 0,
				noticeArr: [],
        resourceList: [],
        cardAddr: [
          {
            title: '校园卡',
            page: '/pages/card/card'
          }
        ]
			}
		},
    async onLoad() {
      await this.getAllList()
      await this.getNewsList()
		},
		methods: {
      //获取所有资源列表
      async getAllList() {
        try {
          const res = await teacher.getAllResourceList();
          this.resourceList = res.data.filter(item => item.auditStatus === 1)
          console.log(this.noticeArr)
        } catch (e) {
          return await Promise.reject(e)
        }
      },
      intoResourceDetail(id) {
        console.log(id)
        uni.navigateTo({
          url: `/pages/resource/resourceDetail?id=${id}`, // 跳转的目标页面路径
        });
      },
      //获取新闻列表
      async getNewsList () {
        try {
          const res = await student.getNewsList()
          this.noticeArr = res.data
        } catch (e) {
          console.log(e)
        }
      },
      async intoNewDetail(id) {
        uni.navigateTo({
          url: `/pages/new/newDetail?id=${id}`, // 跳转的目标页面路径
        });
      },
      goToMyTeach() {
        uni.navigateTo({
          url: '/pages/myClass/classList', // 跳转的目标页面路径
        });
      },
      gotoMyCard() {
        uni.navigateTo({
          url: '/pages/card/card', // 跳转的目标页面路径
        });
      },
      gotoStuScore() {
        uni.navigateTo({
          url: '/pages/scores/gradesManage', // 跳转的目标页面路径
        });
      },
			tabChange({
				index,
				item
			}) {
				this.tab = index;
			},
			navClick(page){
				uni.navigateTo({
					url:page
				})
			},
      navCard() {
        uni.switchTab({
          url: '/pages/card/card'
        });
        console.log("==========================")
      }
		}
	}
</script>

<style>
	page {
    background: linear-gradient(to bottom, #E4DDF5 0%, #FFFFFF 20%); /* 从淡蓝色到白色的渐变 */

  }

	.a1 {
		padding-left: 35upx;
	}

	.a2 {
		font-size: 18px;
		font-weight: 700;
	}

	.a3 {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30upx;
	}

	.a4 {
		height: 300upx;
		width: 92%;
		border-radius: 30upx;
	}

	.a5 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		font-size: 22upx;

		color: #666666;
		padding-top: 30upx;
	}

	.a6 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.a7 {
		height: 70upx;
		width: 70upx;
		margin-bottom: 15upx;
	}

	.a8 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 40upx;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.a9 {
		height: 160upx;
		width: 320upx;
		border-radius: 30upx;
	}

  .b1 {
    padding: 30upx 30upx 0 30upx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .b2 {
    width: 97%;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 600;
    font-size: 28rpx;
    color: #000305;
    background-color: rgba(255, 255, 255, 0);
  }

  .b3 {
    border-radius: 50%;
    height: 80rpx;
    width: 80rpx;
    margin-right: 20upx;
  }

  .name-and-id {
    display: flex;
    flex-direction: column; /* 设置为垂直排列 */
    align-items: flex-start; /* 文本左对齐 */
    margin-left: 10upx; /* 为文本和图片之间添加一些间距 */
  }

  .name-and-id view {
    margin-bottom: 10upx; /* 为姓名和学号之间添加一些间距 */
  }

  .parent-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container {
    width: 90%;
    height: 260upx;
    display: flex;
    flex-direction: row;
    padding: 20upx;

  }

  .left {
    flex: 1;
    display: flex;
    align-items: flex-start; /* 使内容垂直对齐到顶部 */
    justify-content: flex-start; /* 使内容水平对齐到左侧 */
    padding-top: 10upx; /* 调整顶部内边距以控制垂直位置 */
    font-size: 36upx;
    font-weight: bold;
    color: #2f3c4c;
    background: linear-gradient(180deg, #ffffff, #b3cdef);
    padding-left: 13upx;
    border-radius: 5px;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 使子元素在垂直方向上均匀分布 */
    height: 100%; /* 使右容器的高度与父容器相同 */
    padding-left: 10upx;
  }

  .info-container, .card-container {
    flex: 1; /* 使每个子容器占据相等的高度 */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start; /* 水平对齐到左侧 */
    width: 90%;
    padding: 10upx;
    border-radius: 10upx;
    margin-bottom: 10upx; /* 为两个 view 之间添加间距 */
  }

  .info-container {
    background-color: #f1d1bd; /* 个人信息的背景色 */
    color: #ef955d;
    font-weight: bold;
  }

  .card-container {
    background-color: #bce8e6; /* 校园卡的背景色 */
    color: #0cede2;
    font-weight: bold;
  }

  .info-container:last-child, .card-container:last-child {
    margin-bottom: 0; /* 移除最后一个子容器的底部间距 */
  }

  .content {
    padding-left: 20px;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 使内容在水平方向上均匀分布 */
    width: 100%;
  }

  .left-enter-button {
    width: 70upx;
    height: 70upx;
    border-radius: 50%;
    background-color: #b3cdef;
    color: white;
    display: flex;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    margin-right: 3px;
  }

  .right1-enter-button {
    width: 70upx;
    height: 70upx;
    border-radius: 50%;
    background-color: #ef955d;
    color: white;
    display: flex;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    margin-right: 3px;
  }

  .right2-enter-button {
    width: 70upx;
    height: 70upx;
    border-radius: 50%;
    background-color: #0cede2;
    color: white;
    display: flex;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    margin-right: 3px;
  }
	.b4 {
		font-size: 24upx;
		color: darkgrey;
	}

	.b5 {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		margin-top: 30upx;
	}

	.b6 {
		font-size: 18px;
		font-weight: 600;
	}

	.b7 {
		font-size: 20upx;
		color: darkgray;
		margin-top: 10upx;
		letter-spacing: 1upx;
	}

	.b8 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 70upx;
		padding-left: 30upx;
		padding-right: 30upx;
		margin-bottom: 30upx;
	}

	.b9 {
		display: flex;
		flex-direction: column;
		border-radius: 30upx;
		padding-top: 30upx;
		align-items: center;
		height: 300upx;
		width: 220upx;
		box-shadow: 0px -5px 10px 0px #F3F2F8,
			-6px 0px 6px 0px #F3F2F8,
			6px 0px 6px 0px #F3F2F8,
			0px 5px 19px 0px #F3F2F8;
	}

	.c1 {
		width: 70upx;
		height: 70upx;
	}

	.c2 {
		font-size: 26upx;
		margin-top: 10upx;
	}

	.c3 {
		font-size: 18upx;
		color: darkgray;
	}

	.c4 {
		font-size: 20upx;
		color: #666666;
		margin-top: 20upx;
	}

	.c5 {
		height: 50upx;
		width: 50upx;
		margin-top: 30upx;
	}

  .c6 {
    height: 600upx;
    overflow-y: auto; /* 显示垂直滚动条 */
    -webkit-overflow-scrolling: touch; /* 使滚动更平滑（适用于 iOS） */
  }

  .c7 {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 35upx;
    padding-right: 35upx;
    margin-top: 50upx;

  }

  .c8 {
    height: 110upx;
    display: flex;
    flex-direction: column;
    width: 76%;
    padding-right: 30upx;
  }

  .c9 {
    font-size: 16px;
    font-weight: 500;
    height: 90upx;
    line-height: 1.5; /* 使文本垂直居中 */
  }

  .d1 {
    font-size: 20upx;
    color: #999;
    height: 20upx;
    line-height: 1.5; /* 使文本垂直居中 */
  }

  .d2 {
    height: 110upx;
    width: 110upx;
  }


  .news {
    width: 90%;
    font-size: 36upx;
    font-weight:bold;
    padding: 10upx;
    margin-left: 15px;
    margin-top: 10px;
  }

  .resources {
    width: 20%;
    font-size: 36upx;
    font-weight:bold;
    padding: 10upx;
    margin-left: 15px;
  }
</style>
